বুটস্ট্রাপ ৫ একটি শক্তিশালী টুলকিট যা ওয়েবসাইটে navbar এবং sidebar তৈরি করতে সহায়তা করে। Navbar মূলত ওয়েবসাইটের শীর্ষে বা হেডারে থাকা ন্যাভিগেশন উপাদান, আর Sidebar সাধারণত সাইড প্যানেলে থাকা নেভিগেশন উপাদান হিসেবে ব্যবহৃত হয়। বুটস্ট্রাপ ৫ এ এই দুটি উপাদান সহজেই কাস্টমাইজ করা যায় এবং রেসপন্সিভ ডিজাইনের মাধ্যমে মোবাইল ফ্রেন্ডলি করা যায়।

Navbar তৈরি করা

বুটস্ট্রাপ ৫ এ Navbar তৈরি করতে, navbar ক্লাস ব্যবহার করতে হয়। এটি একটি রেসপন্সিভ এবং কাস্টমাইজেবল নেভিগেশন বার যা আপনি চাইলে লোগো, লিংক, ড্রপডাউন মেনু, এবং অন্যান্য নেভিগেশন উপাদান যোগ করতে পারেন। নিচে একটি সাধারণ navbar তৈরি করার উদাহরণ দেওয়া হলো:

উদাহরণ: Basic Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

এখানে:

• navbar ক্লাসটি নেভিগেশন বার তৈরি করে।
• navbar-expand-lg ক্লাসটি রেসপন্সিভ ডিজাইন তৈরি করে, যা বড় স্ক্রীনে স্লাইডিং, এবং ছোট স্ক্রীনে ড্রপডাউন মেনু হিসেবে কাজ করে।
• navbar-light এবং bg-light ক্লাসগুলো নেভিগেশন বারের ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ নির্ধারণ করে।
• navbar-toggler ক্লাসটি মোবাইল ভিউতে একটি হ্যামবার্গার মেনু আইকন তৈরি করে, যা ক্লিক করলে নেভিগেশন মেনু খুলে যায়।

Navbar with Dropdown (ড্রপডাউন সহ)

বুটস্ট্রাপ ৫ এ Dropdown মেনু যোগ করার জন্য dropdown ক্লাস ব্যবহার করতে হয়। এটি সাধারণত ব্যবহারকারীদের আরও অপশন বা অ্যাকশন প্রদান করতে ব্যবহৃত হয়।

উদাহরণ: Navbar with Dropdown

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">MyWebsite</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Services
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Web Design</a></li>
            <li><a class="dropdown-item" href="#">SEO Services</a></li>
            <li><a class="dropdown-item" href="#">Marketing</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

এখানে:

• dropdown-toggle ক্লাসটি ড্রপডাউন লিংক তৈরি করে, যা ক্লিক করলে ড্রপডাউন মেনু প্রদর্শিত হয়।
• dropdown-menu ক্লাসটি ড্রপডাউন মেনুর আইটেমগুলো সাজানোর জন্য ব্যবহৃত হয়।

Sidebar তৈরি করা

Sidebar সাধারণত একটি সাইড প্যানেল যা বিভিন্ন নেভিগেশন লিংক, কন্টেন্ট বা উইজেট ধারণ করে। বুটস্ট্রাপ ৫ এ Sidebar তৈরি করতে, আপনি সাধারণত flexbox এবং positioning ব্যবহার করতে পারেন।

উদাহরণ: Basic Sidebar

<div class="d-flex">
  <!-- Sidebar -->
  <div class="bg-dark text-white p-3" style="width: 250px;">
    <h4>Sidebar</h4>
    <ul class="list-unstyled">
      <li><a href="#" class="text-white">Dashboard</a></li>
      <li><a href="#" class="text-white">Settings</a></li>
      <li><a href="#" class="text-white">Profile</a></li>
      <li><a href="#" class="text-white">Messages</a></li>
    </ul>
  </div>

  <!-- Main Content -->
  <div class="p-4" style="flex-grow: 1;">
    <h1>Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </div>
</div>

এখানে:

• d-flex ক্লাসটি দুটি উপাদানকে একটি সারিতে সাজানোর জন্য ব্যবহার করা হয়।
• bg-dark এবং text-white ক্লাসগুলো সাইডবারের ব্যাকগ্রাউন্ড এবং টেক্সটের রঙ নির্ধারণ করে।
• সাইডবারের ভিতরে ul এবং li ব্যবহার করে একটি লিস্ট তৈরি করা হয়েছে, যা নেভিগেশন লিংকগুলোর জন্য ব্যবহৃত হয়।

Responsive Sidebar

একটি রেসপন্সিভ সাইডবার তৈরি করতে, আপনি collapse ক্লাস এবং বুটস্ট্রাপের navbar স্টাইলের মতো রেসপন্সিভ উপাদান ব্যবহার করতে পারেন। ছোট স্ক্রীনে এটি আড়াল হবে এবং বড় স্ক্রীনে সাইডবার দৃশ্যমান থাকবে।

উদাহরণ: Responsive Sidebar with Toggle

<!-- Sidebar -->
<div class="d-flex">
  <div class="bg-dark text-white p-3" style="width: 250px;" id="sidebar">
    <h4>Sidebar</h4>
    <ul class="list-unstyled">
      <li><a href="#" class="text-white">Dashboard</a></li>
      <li><a href="#" class="text-white">Settings</a></li>
      <li><a href="#" class="text-white">Profile</a></li>
      <li><a href="#" class="text-white">Messages</a></li>
    </ul>
  </div>

  <!-- Main Content -->
  <div class="p-4" style="flex-grow: 1;">
    <h1>Main Content Area</h1>
    <p>This is where your main content goes.</p>
  </div>
</div>

এখানে:

• সাইডবারটি ছোট স্ক্রীনে collapse হতে পারে, যাতে এটি toggle ক্লাস ব্যবহার করে উন্মুক্ত বা বন্ধ করা যায়।

সারাংশ

বুটস্ট্রাপ ৫ এর Navbar এবং Sidebar দ্রুত এবং কার্যকরভাবে রেসপন্সিভ ওয়েব ডিজাইন তৈরিতে সহায়তা করে। Navbar সাধারণত শীর্ষ নেভিগেশনের জন্য ব্যবহৃত হয় এবং Sidebar সাইড প্যানেলে বিভিন্ন নেভিগেশন অপশন প্রদর্শন করে। দুইটি উপাদানই সহজেই কাস্টমাইজ করা যায় এবং বুটস্ট্রাপের ক্লাস এবং গ্রিড সিস্টেম ব্যবহার করে অনেক ধরনের ইন্টারফেস তৈরি করা সম্ভব।

বুটস্ট্রাপ ৫ এ Responsive Navbar তৈরি করা খুবই সহজ। বুটস্ট্রাপের navbar কম্পোনেন্ট ব্যবহার করে আপনি একটি সুন্দর, ফ্লেক্সিবল এবং রেসপন্সিভ নেভিগেশন বার তৈরি করতে পারবেন, যা বিভিন্ন স্ক্রীন সাইজের জন্য স্বয়ংক্রিয়ভাবে উপযুক্ত হয়ে ওঠে। এটি বিশেষত মোবাইল এবং ডেস্কটপ ডিভাইসের মধ্যে পার্থক্য ভেদে একে অপরের সাথে সঙ্গতি রেখে কাজ করে।

এখানে আমরা বুটস্ট্রাপ ৫ ব্যবহার করে একটি রেসপন্সিভ নেভিগেশন বার তৈরি করার পদ্ধতি দেখব।

Basic Navbar Structure

প্রথমে একটি সাধারণ navbar তৈরি করা যাক। এটি একটি প্রাথমিক নেভিগেশন বার হবে যা মোবাইল ডিভাইসে collapsed হবে এবং বড় স্ক্রীনে সাধারণভাবে দৃশ্যমান থাকবে।

উদাহরণ: Basic Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

ব্যাখ্যা:

• navbar navbar-expand-lg navbar-light bg-light:
  • navbar ক্লাসটি নেভিগেশন বার তৈরি করে।
  • navbar-expand-lg এই ক্লাসটি ব্যবহার করলে নেভিগেশন বারটি বড় স্ক্রীনে এক্সপ্যান্ড (প্রসারিত) হবে এবং ছোট স্ক্রীনে কোলাপ্সড থাকবে।
  • navbar-light bg-light: লাইট থিমের ব্যাকগ্রাউন্ড রঙ।
• navbar-toggler: মোবাইল ডিভাইসে নেভিগেশন বারটি কোলাপ্সড করার জন্য একটি বাটন।
  • এই বাটনে ক্লিক করলে নেভিগেশন আইটেমগুলো খুলে যাবে।
• collapse navbar-collapse: এটি মোবাইল ডিভাইসে নেভিগেশন বারটি কোলাপ্সড বা মিনিমাইজড রাখে এবং বাটনে ক্লিক করলে এটি খুলে যায়।
• navbar-nav: এই ক্লাসটি নেভিগেশন লিঙ্কগুলোর তালিকা তৈরি করে।

Navbar Brand

নেভিগেশন বারটি তৈরি করার পর, আপনি brand হিসেবে একটি লোগো বা টেক্সট যোগ করতে পারেন।

উদাহরণ: Navbar Brand এর সাথে

<a class="navbar-brand" href="#">My Website</a>

এটি নেভিগেশন বারের বাম পাশে একটি ব্র্যান্ড বা সাইট নাম হিসেবে দৃশ্যমান হবে। আপনি এখানে একটি লোগোও ব্যবহার করতে পারেন।

Navbar Color Variants

বুটস্ট্রাপ ৫ এ বিভিন্ন ধরনের ব্যাকগ্রাউন্ড এবং টেক্সট কালারের জন্য navbar ক্লাসের বিভিন্ন ভ্যারিয়েন্ট রয়েছে। আপনি dark, light, এবং অন্য কালার ভ্যারিয়েন্টও ব্যবহার করতে পারেন।

উদাহরণ: Dark Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

এখানে navbar-dark bg-dark ক্লাস ব্যবহার করে নেভিগেশন বারটি গা dark রঙে তৈরি করা হয়েছে।

Navbar with Dropdown Menu

আপনি Dropdown মেনুও নেভিগেশন বারে যোগ করতে পারেন। এটি আপনাকে একাধিক অপশন প্রদর্শন করতে সাহায্য করে, যা একটানা অনেক আইটেম লিস্ট করতে সক্ষম।

উদাহরণ: Dropdown Menu

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown
  </a>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</li>

এখানে nav-item dropdown ব্যবহার করা হয়েছে এবং dropdown-toggle ক্লাসটি ড্রপডাউন মেনু তৈরির জন্য। dropdown-menu ক্লাসটি মেনু আইটেমগুলো প্রদর্শন করতে ব্যবহৃত হয়।

Full Example: Responsive Navbar with Dropdown

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

এটি একটি সম্পূর্ণ রেসপন্সিভ নেভিগেশন বার যেখানে dropdown মেনু এবং বিভিন্ন নেভিগেশন লিঙ্ক রয়েছে। মোবাইল ডিভাইসে, এটি কোলাপ্সড থাকবে এবং বড় স্ক্রীনে এক্সপ্যান্ড হবে।

বুটস্ট্রাপ ৫ এ Navbar একটি জনপ্রিয় এবং সহজ উপায় ওয়েবসাইটের নেভিগেশন তৈরি করার জন্য। এতে Dropdown Menu এবং Search Bar অন্তর্ভুক্ত করা খুব সহজ। এই টিউটোরিয়ালে আমরা বুটস্ট্রাপ ৫ এর Dropdown এবং Search Bar সহ Navbar কিভাবে তৈরি করা যায় তা দেখব।

Navbar এর মৌলিক গঠন

বুটস্ট্রাপ ৫ এ Navbar তৈরি করতে হলে সাধারণত navbar ক্লাস ব্যবহার করতে হয়। নিচে একটি সাধারণ Navbar গঠন দেখানো হল, যেখানে Dropdown Menu এবং Search Bar যুক্ত করা হয়েছে।

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">আমার ওয়েবসাইট</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">হোম</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">আমাদের সম্পর্কে</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">পরিষেবা</a>
        </li>
        <!-- Dropdown Menu -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            আরও
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">অপশন ১</a></li>
            <li><a class="dropdown-item" href="#">অপশন ২</a></li>
            <li><a class="dropdown-item" href="#">অপশন ৩</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">অন্য কিছু</a></li>
          </ul>
        </li>
        <!-- Search Bar -->
        <li class="nav-item">
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="খুঁজুন" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">খুঁজুন</button>
          </form>
        </li>
      </ul>
    </div>
  </div>
</nav>

কোড বিশ্লেষণ

1. Navbar স্ট্রাকচার:
   • navbar navbar-expand-lg navbar-light bg-light: এটি বুটস্ট্রাপের Navbar ক্লাস, যা লাইট পটভূমি এবং রেসপন্সিভ ডিজাইন তৈরি করে।
   • container-fluid: ওয়েবসাইটের প্রস্থ পুরোপুরি নেয়ার জন্য এটি ব্যবহার করা হয়।
2. Dropdown Menu:
   • nav-item dropdown: এই ক্লাসটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়।
   • dropdown-toggle: এটি ড্রপডাউন মেনুর টগল ক্লাস, যা ব্যবহারকারী ক্লিক করলে ড্রপডাউন মেনু প্রদর্শিত হয়।
   • dropdown-menu: এটি ড্রপডাউন মেনুর তালিকা কন্টেইনার।
   • dropdown-item: প্রতিটি ড্রপডাউন আইটেমের জন্য এই ক্লাস ব্যবহার করা হয়।
3. Search Bar:
   • form-control: এটি ইনপুট ফিল্ডের জন্য বুটস্ট্রাপের স্টাইল।
   • me-2: ইনপুট ফিল্ড এবং বাটনের মধ্যে মার্জিন দেয়।
   • btn btn-outline-success: বাটনের স্টাইল যা সাধারণভাবে সাজানো হয়, এবং এর মাধ্যমে ব্যবহারকারী সার্চ করার জন্য টিপে দিতে পারেন।

রেসপন্সিভ ডিজাইন

বুটস্ট্রাপের Navbar স্বয়ংক্রিয়ভাবে রেসপন্সিভ হয়, অর্থাৎ স্ক্রীনের আকার অনুযায়ী এটি নিজে থেকেই ভিউ পরিবর্তন করে। ছোট স্ক্রীনে Navbar টগল বাটন (hamburger menu) হিসেবে প্রদর্শিত হবে, যা ব্যবহারকারী ক্লিক করলে মেনু খোলা যাবে।

navbar-toggler এবং navbar-toggler-icon এর মাধ্যমে এই রেসপন্সিভ টগল ফাংশনটি কাজ করে।

কাস্টমাইজেশন

আপনি আপনার প্রয়োজন অনুযায়ী Navbar কাস্টমাইজ করতে পারেন। যেমন:

• রঙ পরিবর্তন: Navbar এর ব্যাকগ্রাউন্ড এবং বাটনের রঙ পরিবর্তন করতে CSS ব্যবহার করতে পারেন।
• অন্যান্য ফিচার: আরও উন্নত ফিচার যেমন লগিন ফর্ম, সাইন-আপ ফর্ম, বা ব্যবহারকারীর প্রোফাইল আইকন সহ Navbar তৈরি করা যেতে পারে।

Navbar এর রঙ পরিবর্তন

.navbar-light {
  background-color: #4CAF50; /* গ্রিন ব্যাকগ্রাউন্ড */
}
.navbar-light .navbar-nav .nav-link {
  color: #fff; /* সাদা রঙের টেক্সট */
}

সারাংশ

বুটস্ট্রাপ ৫ এ Dropdown Menu এবং Search Bar সহ একটি রেসপন্সিভ Navbar তৈরি করা খুবই সহজ। শুধু বুটস্ট্রাপের উপযুক্ত ক্লাস ব্যবহার করে আপনি একটি সুন্দর এবং কার্যকরী নেভিগেশন বার তৈরি করতে পারেন, যা মোবাইল এবং ডেস্কটপ উভয়ই সমর্থন করে।

বুটস্ট্রাপ ৫ এর মাধ্যমে আপনি সহজেই sticky (পৃষ্ঠার উপরেই আটকে থাকা) এবং fixed (পৃষ্ঠার সাথেই স্থির থাকা) navbar তৈরি করতে পারেন। এর মাধ্যমে আপনার ওয়েবসাইটে নেভিগেশন বারে ইউজারকে সর্বদা প্রয়োজনীয় লিংকগুলো এক্সেসযোগ্য রাখতে সাহায্য করবে। নিচে এই দুটি নেভবারের তৈরি পদ্ধতি নিয়ে আলোচনা করা হলো।

Sticky Navbar

Sticky Navbar এর মাধ্যমে, স্ক্রল করার সময় নেভবারটি পৃষ্ঠার উপরের অংশে আটকে থাকে। এটি ব্যবহারকারীদের জন্য একটি সুবিধাজনক নেভিগেশন সুবিধা প্রদান করে, যেখানে তারা ওয়েব পৃষ্ঠার যে কোনও জায়গায় গেলেও নেভবারটি সবসময় দৃশ্যমান থাকে।

উদাহরণ: Sticky Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">হোম</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ব্লগ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">যোগাযোগ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

এখানে sticky-top ক্লাসটি ব্যবহার করা হয়েছে, যা নেভবারকে পৃষ্ঠার শীর্ষে আটকে রাখে যখন ব্যবহারকারী স্ক্রল করবে।

Fixed Navbar

Fixed Navbar এর মাধ্যমে, নেভবারটি পৃষ্ঠার উপরের অংশে স্থির হয়ে থাকে, এবং পৃষ্ঠার নিচে স্ক্রল করলেও এটি স্থান পরিবর্তন করে না। এটি ব্যবহারকারীদের সবসময় নেভিগেশন পদ্ধতি দেখানোর জন্য উপযুক্ত।

উদাহরণ: Fixed Navbar

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">My Website</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">হোম</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ব্লগ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">যোগাযোগ</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

এখানে fixed-top ক্লাসটি ব্যবহার করা হয়েছে, যা নেভবারকে পৃষ্ঠার শীর্ষে স্থিরভাবে রাখে।

Sticky এবং Fixed Navbar এর মধ্যে পার্থক্য

• Sticky Navbar: যখন আপনি স্ক্রল করবেন, এটি পৃষ্ঠার শীর্ষে আটকে থাকবে কিন্তু পৃষ্ঠার অন্য অংশে চলে গেলে এটি স্ক্রল হয়।
• Fixed Navbar: এটি সর্বদা পৃষ্ঠার শীর্ষে স্থির থাকে, স্ক্রল করলে এটি তার অবস্থান পরিবর্তন করে না।

এভাবে, বুটস্ট্রাপ ৫ এর প্রি-ডিফাইন্ড ক্লাসগুলোর সাহায্যে আপনি সহজে রেসপন্সিভ এবং ইউজার ফ্রেন্ডলি sticky এবং fixed নেভবার তৈরি করতে পারেন।

বুটস্ট্রাপ ৫ এ Offcanvas Menu বা রেসপন্সিভ সাইডবার তৈরি করা খুবই সহজ। এটি একটি আউটপ্যানেল সাইডবার যা সঠিকভাবে রেসপন্সিভ এবং মোবাইল-ফ্রেন্ডলি হয়। এটি সাধারণত ওয়েবসাইটের নেভিগেশন বা অতিরিক্ত কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়, যেখানে স্ক্রীনের এক পাশ থেকে সাইডবারটি স্লাইড করে আসে।

বুটস্ট্রাপ ৫ এ Offcanvas উপাদানটি একটি বিল্ট-ইন উপাদান হিসেবে এসেছে, যা খুব সহজে সাইডবার বা মেনু তৈরি করতে সাহায্য করে।

Offcanvas Menu তৈরি করার উপাদান

1. Offcanvas Container: সাইডবার তৈরি করতে এটি প্রথম উপাদান, যা সাইডবারকে ডিফাইন করবে।
2. Toggle Button: একটি বাটন বা লিঙ্ক যা ক্লিক করলে সাইডবারটি প্রদর্শিত হবে।
3. Offcanvas Content: সাইডবারে থাকা কন্টেন্ট, যেমন: লিঙ্ক, মেনু আইটেম ইত্যাদি।

উদাহরণ: রেসপন্সিভ সাইডবার (Offcanvas Menu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Sidebar - Offcanvas Menu</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <!-- Offcanvas Toggle Button -->
    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
        মেনু
    </button>

    <!-- Offcanvas Menu (Sidebar) -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasExampleLabel">সাইডবার</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="list-group">
                <li class="list-group-item">হোম</li>
                <li class="list-group-item">আমাদের সম্পর্কে</li>
                <li class="list-group-item">সেবা</li>
                <li class="list-group-item">যোগাযোগ</li>
            </ul>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

ব্যাখ্যা:

• data-bs-toggle="offcanvas": এই অ্যাট্রিবিউটটি টগল বাটনের মাধ্যমে সাইডবার (Offcanvas) খুলতে ব্যবহৃত হয়।
• data-bs-target="#offcanvasExample": এই অ্যাট্রিবিউটটি টগল বাটনকে সাইডবারের ID-এর সাথে সংযুক্ত করে। এতে টগল বাটন ক্লিক করলে এটি নির্দিষ্ট সাইডবারটি খুলবে।
• offcanvas offcanvas-start: offcanvas-start ব্যবহার করা হয়েছে সাইডবারটি স্ক্রীনের বামপাশে অবস্থান করবে। যদি আপনি সাইডবারটি ডানপাশে রাখতে চান, তাহলে offcanvas-end ব্যবহার করতে হবে।
• btn-close: সাইডবার বন্ধ করার জন্য একটি ক্লোজ বাটন।

অতিরিক্ত কাস্টমাইজেশন:

সাইডবারের অবস্থান পরিবর্তন:

• offcanvas-end: যদি আপনি সাইডবারটি ডানপাশে প্রদর্শন করতে চান, তবে offcanvas-start এর পরিবর্তে offcanvas-end ব্যবহার করুন।

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <!-- বাকি কন্টেন্ট এখানে থাকবে -->
</div>

সাইডবারের আকার কাস্টমাইজ করা:

বুটস্ট্রাপ ৫ এ offcanvas এর আকার নিয়ন্ত্রণ করার জন্য আপনি offcanvas-lg, offcanvas-sm ইত্যাদি ক্লাস ব্যবহার করতে পারেন। এতে সাইডবারের প্রস্থ নির্ধারণ করা সম্ভব হয়।

<div class="offcanvas offcanvas-start offcanvas-lg" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <!-- বাকি কন্টেন্ট এখানে থাকবে -->
</div>

সারাংশ

বুটস্ট্রাপ ৫ এর Offcanvas Menu বা সাইডবার একটি অত্যন্ত শক্তিশালী এবং সহজলভ্য উপাদান, যা আপনি আপনার ওয়েবসাইটের নেভিগেশন বা অন্যান্য কন্টেন্টের জন্য ব্যবহার করতে পারেন। এটি রেসপন্সিভ এবং মোবাইল-ফ্রেন্ডলি, তাই ব্যবহারকারী যেকোনো ডিভাইসে এটি ব্যবহার করতে পারবে। টগল বাটন এবং সাইডবারের কাস্টমাইজেশন খুবই সহজ, এবং আপনি স্ক্রীনের যে কোনো পাশে এটি প্রদর্শন করতে পারেন।